<template>
  <div class="container">
    <el-card class="box-card">
      <div class="clearfix">
        <div style="margin-bottom: 30px">
          <span style="font-size: 12px; color: pink">说明：目前支持学科和关键字条件筛选</span>
          <el-button
            style="float: right; padding: 5px font-size: 12px; "
            type="success"
            icon="el-icon-edit"
            size="medium"
            @click="NewQuestions"
            >新增试题</el-button
          >
        </div>
        <!-- 表单验证区域 -->
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" size="small">
        <!-- 学科 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科" prop="subject">
              <el-select placeholder="请选择" v-model="subject.subjectID" @change="Humanities">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in formData.discipline"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="region">
              <el-select v-model="subject.directoryName" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in formData.subjectName"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="region">
              <el-select placeholder="请选择" v-model="subject.tags">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in formData.tallys"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model.trim="subject.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" prop="region">
              <el-select v-model="subject.questionType" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in formData.ItemDifficulty"
                  :key="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" prop="region">
              <el-select v-model="subject.difficulty" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in formData.Testingtypes"
                  :key="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" prop="region">
              <el-select v-model="subject.direction" placeholder="请选择">
                <el-option
                  :label="item"
                  :value="item"
                  v-for="item in formData.orientation"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" prop="name">
              <el-select placeholder="请选择" v-model="subject.creatorID">
                <el-option
                  v-for="item in formData.EnterOne"
                  :key="item.id"
                  :label="item.username"
                  :value="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model.trim="subject.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model.trim="subject.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                @change="CityList"
                placeholder="请选择"
                style="margin-right: 4%; width: 48%"
                v-model="subject.province"
              >
                <el-option
                  v-for="item in formData.province"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select v-model="subject.city" placeholder="请选择" style="width: 48%">
                <el-option :label="item" :value="item" v-for="item in formData.city"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="ThePurge">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template>
        <el-tabs type="card" @tab-click="handleClick">
          <el-alert
            :title="`数据一共 ${indexs}条`"
            type="info"
            style="margin-bottom: 20px"
            show-icon
            :closable="false"
          >
          </el-alert>

          <el-table
            :data="tableData"
            style="width: 100% :header-cell-style={'border-bottom':'2px solid #ccc'}"
          >
            <el-table-column prop="number" label="试题编号" width="200"> </el-table-column>
            <el-table-column prop="subject" label="学科" width="120"> </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120"> </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template #default="{ row }">
                {{ questionType(row.questionType) }}
              </template>
            </el-table-column>
            <el-table-column prop="question" label="题干" width="300">
              <template #default="{ row }">
                <div v-html="row.question"></div>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="200">
              <template #default="{ row }">
                {{ formatDate(row.addDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" width="200">
              <template #default="{ row }">
                {{ difficulty(row.difficulty) }}
              </template>
            </el-table-column>
            <el-table-column prop="creatorID" label="录入人" width="200">
              <template #default="{ row }">
                {{ creatorID(row.creatorID) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkState" label="审核状态" width="200">
              <template #default="{ row }">
                {{ chkState(row.chkState) }}
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="200"> </el-table-column>
            <el-table-column prop="creator" label="审核人" width="200"> </el-table-column>
            <el-table-column prop="publishState" label="发布状态" width="200">
              <template #default="{ row }">
                {{ publishState(row.publishState) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="{ row }">
                <el-button type="text" size="small" @click="preview(row)">预览</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="audit(row)"
                  :disabled="Boolean(row.chkState)"
                  >审核</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="recompose(row)"
                  :disabled="row.publishState === 0 ? disable : invocation"
                  >修改</el-button
                >
                <el-button type="text" size="small" @click="shelves(row)">
                  {{ Added(row.publishState) }}
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="expurgate(row.id)"
                  :disabled="row.publishState === 0 ? disable : invocation"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-dialog title="题目审核" :visible="AuditBounced" width="30%" @close="closeswitch">
            <template>
              <el-radio v-model="auditor.chkState" :label="1">通过</el-radio>
              <el-radio v-model="auditor.chkState" :label="2">拒绝</el-radio>
              <el-form ref="form" label-width="80px">
                <el-form-item>
                  <el-input
                    type="textarea"
                    style="margin-left: 0"
                    placeholder="请输入审核意见"
                    v-model.trim="auditor.chkRemarks"
                  ></el-input>
                </el-form-item>
              </el-form>
            </template>
            <template #footer>
              <el-button @click="closeswitch">取消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </template>
          </el-dialog>
          <el-tab-pane label="全部" name="first"> </el-tab-pane>
          <el-tab-pane label="待审核" name="second"></el-tab-pane>
          <el-tab-pane label="已审核" name="third"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
        </el-tabs>
      </template>
      <el-pagination
        background
        layout="prev, pager, next, sizes,jumper"
        :total="total"
        @current-change="pageChange"
        :page-sizes="[5, 10, 20, 50]"
        :current-page="params.pages"
        :page-size="params.pagesize"
        @size-change="handleSizeChange"
        style="float: right; margin: 20px 0"
      >
      </el-pagination>
      <questions-preview
        :dialog-visible="dialogVisible"
        :row="dialogInfo"
        @close-dialog="closeDialog"
      ></questions-preview>
    </el-card>
  </div>
</template>

<script>
import { choice, choicePublish, remove, choiceCheck } from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simples } from '@/api/hmmm/directorys.js'
import { simpless } from '@/api/hmmm/tags.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { list } from '@/api/base/users.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview'
import * as dayjs from 'dayjs'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'Selection',
  components: {
    QuestionsPreview
  },
  data() {
    return {
      ruleForm: {
        subject: ''
      }, //
      rules: {}, //规则对象
      province: [], // 省份
      city: [], // 城市
      tableData: [], //分页数据
      formData: {
        //一级目录
        discipline: [],
        // 二级目录
        subjectName: [],
        // 标签
        tallys: [],
        // 试题难度
        Testingtypes: [],
        // 试题类型
        ItemDifficulty: [],
        // 方向
        orientation: [],
        // 录入人
        EnterOne: [],
        // 省份
        province: [],
        // 城市
        city: []
      },
      //新增用
      subject: {
        subjectID: '',
        directoryName: '',
        tags: '',
        questionType: '',
        difficulty: '',
        direction: '', //方向
        creatorID: '', //录入人
        province: '', //省份
        city: '', //城市
        keyword: '', //题干
        remarks: '', //题目字段
        shortName: '' //企业简称
      },
      total: 0, //分页总数
      params: {
        page: 1,
        pagesize: 5
      },

      dialogVisible: false, //预览弹框
      AuditBounced: false, //审核弹框
      auditor: {
        id: 0,
        chkState: 1,
        chkRemarks: ''
      }, //题目审核
      invocation: true, //启用禁用
      disable: false, // 修改启用禁用
      indexs: 0, //当前多少页数据
      dialogInfo: {} //预览对象
    }
  },
  mounted() {
    this.PickLists()
  },
  methods: {
    // 请求列表数据
    async PickLists() {
      const { data } = await choice(this.params)
      // 分页
      this.indexs = data.counts
      this.total = data.counts
      this.params.page = Number(data.page)
      this.params.pagesize = Number(data.pagesize)
      this.tableData = data.items
      const res = await simple()
      this.formData.discipline = res.data
      // 难度
      this.formData.Testingtypes = difficulty
      // 试题类型
      this.formData.ItemDifficulty = questionType
      // 方向
      this.formData.orientation = direction
      // 录入人
      const lists = await list()
      this.formData.EnterOne = lists.data.list
      this.formData.province = provinces()
    },
    // 当前页数据
    pageChange(page) {
      this.params.page = page
      this.PickLists()
    },
    // 分页数组
    handleSizeChange(pagesize) {
      this.params.pagesize = pagesize
      this.PickLists()
    },
    // 一级目录地方
    async Humanities() {
      // 二级目录
      const { data } = await simples(this.subject)
      this.formData.subjectName = data
      // 标签
      const res = await simpless(this.subject)
      this.formData.tallys = res.data
    },
    // 城市下属地方
    CityList() {
      this.formData.city = citys(this.subject.province)
    },
    // 格式化单选多选
    questionType(type) {
      const map = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return map[type]
    },
    // 格式化难度
    difficulty(Abyss) {
      const map = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return map[Abyss]
    },
    // 格式化录入人
    creatorID(entry) {
      const map = {
        1: '其他',
        2: '超级管理'
      }
      return map[entry]
    },
    // 审核状态
    chkState(audit) {
      const map = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝'
      }
      return map[audit]
    },
    // 发布状态
    publishState(status) {
      const map = {
        0: '待发布',
        1: '已发布',
        2: '已拒绝'
      }
      return map[status]
    },
    //上架下架
    Added(type) {
      const map = {
        0: '上架',
        1: '下架'
      }
      return map[type]
    },
    // 日期格式化
    formatDate(value, str = 'YYYY-MM-DD HH:mm:ss') {
      return dayjs(value).format(str)
    },
    // 搜索
    search() {
      this.params.subjectID = this.subject.subjectID
      this.params.keyword = this.subject.keyword
      this.PickLists()
    },
    // 清除
    ThePurge() {
      this.subject = {}
      this.params = {}
      this.PickLists()
    },
    // 上架下架
    shelves(type) {
      this.$confirm(`是否${type.publishState !== 1 ? '上架' : '下架'}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (type.publishState === 1) {
          type.publishState = 0
        } else {
          type.publishState = 1
        }
        await choicePublish(type)
        this.$message.success(type.publishState !== 1 ? '上架成功' : '下架成功')
        this.PickLists()
      })
    },
    // 审核
    audit(row) {
      this.AuditBounced = true
      this.auditor.id = row.id
      // console.log(row.chkState)
    },
    // 关闭弹框回调
    closeswitch() {
      this.AuditBounced = false
      this.auditor.chkRemarks = ''
    },
    // 题目审核
    async confirm() {
      if (this.auditor.chkRemarks === '') {
        this.AuditBounced = true
        this.$message.success('请输入审核意见')
        return
      } else {
        await choiceCheck(this.auditor)
      }
      this.$message.success(this.auditor.chkState === 2 ? '不通过' : '通过')
      this.PickLists()
      this.closeswitch()

      //  禁用启用
    },
    // tap切换
    async handleClick(tab) {
      if (tab.index == 0) {
        this.params = {}
      } else if (tab.index == 1) {
        this.params.chkState = 0
      } else if (tab.index == 2) {
        this.params.chkState = 1
      } else if (tab.index == 3) {
        this.params.chkState = 2
      }
      const { data } = await choice(this.params)
      this.indexs = data.counts
      this.PickLists()
    },
    // 修改
    recompose(rows) {
      this.$router.push({
        path: '/questions/new',
        query: { id: rows.id }
      })
    },
    // 新增试题
    NewQuestions() {
      this.$router.push('/questions/new')
    },

    // 删除
    expurgate(id) {
      this.$confirm('确定删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.tableData.id = id
        await remove(this.tableData)
        this.PickLists()
        this.$message.success('删除成功')
      })
    },
    // 预览
    preview(pvw) {
      this.dialogVisible = true
      this.dialogInfo = pvw
    },
    // 预览弹窗关闭回调
    closeDialog() {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="less">
.container {
  margin: 10px 7px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  .el-col {
    .el-form-item {
      .el-select {
        width: 100%;
      }
    }
  }
}

/deep/.el-dialog .el-form-item__content {
  margin-top: 20px;
  margin-left: 0 !important;
}
</style>
